#file-browser {
  data-url {
    display: none;
  }

  .tile {
    &[storageType='permission'] {
      background-color: #9999ff;
      background-color: var(--primary-color);
      color: white;
      color: var(--text-main-color);
      height: 40px;
      text-align: center;
      .icon {
        display: none;
        content: '';
      }
    }

    .icon {
      position: relative;
      color: rgb(65, 85, 133);

      &[storageType]::after {
        position: absolute;
        top: 50%;
        left: 50%;
        content: attr(storageType);
        transform: translate(-50%, -50%);
        color: white;
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      &.clearclose {
        color: currentColor;
        font-size: 1.2rem;
      }

      &.folder {
        color: rgb(206, 206, 53);

        &.user-added-storage {
          color: rgb(53, 101, 206);
        }
      }

      &.code {
        color: rgb(79, 155, 79);
      }
    }
  }

  .info {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background-color: rgba($color: #000000, $alpha: 0.1);
  }

  #list {
    height: calc(100% - 60px);
    overflow-y: auto;

    .tile {
      &[disabled] {
        .text {
          opacity: 0.5;
        }
      }

      &[read-only] {
        .text::after {
          content: 'Read only';
          font-size: 0.6em;
          color: white;
          background-color: rgb(62, 100, 138);
          border-radius: 4px;
          padding: 5px;
          margin: auto 15px;
        }
      }
    }
  }
}
